<template>
  <div>
    <!-- 头部 -->
    <headers />
    <!-- nav导航栏 -->
    <navLlist></navLlist>
    <!-- 商品详情 -->
    <div class="main">
      <div id="details">
        <div class="page-header">
          <div class="title">
            <p>Redmi K30 5G</p>
            <div class="list">
              <ul>
                <li>概述</li>
                <li>参数</li>
                <li>用户评价</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="block">
            <!-- 轮播图区域 -->
            <!-- <el-carousel height="150px">
              <el-carousel-item v-for="item in 4" :key="item">
                <h3 class="small">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel> -->
            <el-carousel :interval="5000" arrow="always" height="560px">
              <el-carousel-item v-for="item in ProductPicture" :key="item.id">
                <img
                  :src="$target + item.product_picture"
                  alt=""
                  style="width: 560px; height: 560px"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="content" v-for="(item, index) in list" :key="index">
            <h1 class="name">{{ item.product_name }}</h1>
            <p class="intro">{{ item.product_intro }}</p>
            <p class="store">小米自营</p>
            <div class="price">
              <span>{{ item.product_selling_price }}</span>
              <span class="del">{{ item.product_price }}</span>
            </div>
            <div class="pro-list">
              <span class="pro-name">{{ item.product_name }}</span>
              <span class="pro-price">
                <span>{{ item.product_selling_price }}元</span>
                <span class="pro-del">{{ item.product_price }}元</span>
              </span>
              <p class="price-sum">总计 : {{ item.product_selling_price }}元</p>
            </div>
            <div class="button">
              <el-button class="shop-cart"><span>加入购物车</span></el-button>
              <el-button class="like"><span>喜欢</span></el-button>
            </div>
            <div class="pro-policy">
              <ul>
                <li><i class="el-icon-circle-check"></i>小米自营</li>
                <li><i class="el-icon-circle-check"></i>小米发货</li>
                <li><i class="el-icon-circle-check"></i>7天无理由退货</li>
                <li><i class="el-icon-circle-check"></i>7天价格保护</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <footers></footers>
  </div>
</template>

<script>
import headers from "../components/header/Header";
import footers from "../components/footer/Footer";
import navLlist from "../views/nav/Nav";
import listApi from "../api/details";
export default {
  components: { headers, navLlist,footers },
  data() {
    return {
      list: [],
      ProductPicture: [],
    };
  },
  methods: {
    async getDetails() {
      let id = this.$route.query.productID;
      console.log(id);
      let res = await listApi.getDetails({ productID: id });
      //   console.log(res.data);
      this.list = res.data.Product;
      console.log(this.list);
    },
    //请求轮播图数据
    async DetailsPicture() {
      let id = this.$route.query.productID;
      let { data: res } = await listApi.DetailsPicture({ productID: id });
      console.log(res);
      this.ProductPicture = res.ProductPicture;
    },
  },
  computed: {},
  filters: {},
  directives: {},
  mounted() {
    this.getDetails();
    this.DetailsPicture();
  },
};
</script>

<style lang="scss" scoped>
.main {
  min-height: 800px;
  // background: pink;
  padding: 20px 0;
  margin-top: 5px;
}
.page-header {
  height: 64px;
  margin-top: -20px;
  z-index: 4;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.07);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.07);
  .title {
    width: 1225px;
    height: 64px;
    line-height: 64px;
    font-size: 18px;
    font-weight: 400;
    color: #212121;
    margin: 0 auto;
    p {
      float: left;
    }
    .list {
      height: 64px;
      float: right;
      ul {
        list-style: none;
        li {
          float: left;
          margin-left: 20px;
          font-size: 14px;
          color: #616161;
        }
        li:hover {
          color: red;
          cursor: pointer;
        }
      }
    }
  }
}
.box {
  width: 100%;
  height: 560px;
  padding-top: 30px;
  margin: 0 auto;
  display: flex;
}
.block {
  width: 560px;
  height: 560px;
}
.content {
  margin-left: 25px;
  width: 640px;
  .name {
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    font-weight: 400;
    color: #212121;
  }
  .intro {
    color: #b0b0b0;
    padding-top: 10px;
  }
  .store {
    color: #ff6700;
    padding-top: 10px;
  }
  .price {
    display: block;
    font-size: 18px;
    color: #ff6700;
    border-bottom: 1px solid #e0e0e0;
    padding: 25px 0 25px;
    .del {
      font-size: 14px;
      margin-left: 10px;
      color: #b0b0b0;
      text-decoration: line-through;
    }
  }
  .el-button {
    float: left;
    height: 55px;
    font-size: 16px;
    color: #fff;
    border: none;
    text-align: center;
  }
  .pro-list {
    background: #f9f9fa;
    padding: 30px 60px;
    margin: 50px 0 50px;
    span {
      line-height: 30px;
      color: #616161;
    }
    .pro-price {
      float: right;
      .pro-del {
        margin-left: 10px;
        text-decoration: line-through;
      }
    }
    .price-sum {
      color: #ff6700;
      font-size: 24px;
      padding-top: 20px;
    }
  }
  .shop-cart {
    width: 340px;
    background-color: #ff6700;
  }
  .like {
    width: 260px;
    margin-left: 40px;
    background-color: #b0b0b0;
  }
  .pro-policy {
    li {
      float: left;
      margin-right: 20px;
      color: #b0b0b0;
    }
  }
  .button {
    height: 55px;
    margin: 10px 0 20px 0;
  }
}
</style>